<template>
  <template v-for="(item, index) in subMenu">
    <!--树枝-->
    <template v-if="item.isMenu && item.children && item.children.length > 0">
      <el-sub-menu
        :key="item.name + index"
        :index="item.path"
        style="vertical-align: middle;"
      >
        <template #title>
          <component
            :is="item.icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
          >
          </component>
          <span>{{item.title}}</span>
        </template>
        <!--递归子菜单-->
        <menu-item
          :subMenu="item.children"
        />
      </el-sub-menu>
    </template>
    <!--树叶-->
    <el-menu-item v-else-if="item.isMenu"
      :index="item.path"
      :key="'son_' + item.name + index"
    >
      <template #title>
        <span style="float: left;">
          <component
            :is="item.icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
          >
          </component>
          <span >{{item.title}}</span>
        </span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
  // import menuItem from './menu-item.vue'
  defineOptions({ name: 'menu-item', inheritAttrs: false })

  import type { IMenu } from '../router/tool'
 
  const props = defineProps({
    subMenu: Array<IMenu> // 要显示的菜单，可以n级
  })

  console.log('props:', props)
 
</script>
